<template>
  <div class="common_wrap">
    <div class="common_title">街道(乡镇)信息维护</div>
    <el-form ref="queryForm" :model="queryParams" label-width="95px" inline class="search-nav">
      <el-form-item prop="districtCode" label="辖区">
        <el-select placeholder="请选择辖区"  @change="changeArea" v-model="queryParams.districtCode" filterable clearable>
          <el-option
            v-for="(item) in areaList"
            :key="item.areaId"
            :label="item.areaName"
            :value="item.areaId"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="streetCode" label="乡镇(街道)">
       <el-select placeholder="请选择乡镇(街道)" v-model="queryParams.streetCode" filterable clearable>
          <el-option
            v-for="(item,index) in streetList"
            :key="index"
            :label="item.areaName"
            :value="item.areaId"
          />
        </el-select>
      </el-form-item>

      <el-form-item prop="employeeName" label="负责人">
        <el-input placeholder="请输入负责人" v-model="queryParams.employeeName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button type="primary" plain icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button type="primary" plain icon="el-icon-refresh" @click="addPerson">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <el-table-column prop="districtName" label="辖区" align="center"></el-table-column>
      <el-table-column prop="streetName" label="乡镇（街道）" align="center"></el-table-column>
      <el-table-column prop="employeeName" label="负责人" align="center">
        <template slot-scope="scope">
            <div>
              <span v-for="(item,index) in  scope.row.employeeList" :key="index">{{item.employeeName}}    </span>
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="编辑" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
<el-pagination
          @size-change="handleSizeChange"
          @current-change="currentChange"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <el-form ref="formEdit" :model="editParams" label-width="95px">
        <el-form-item  prop="area" label="辖区">
          <el-select @change="changeEditArea" v-model="editParams.districtCode" filterable >
            <el-option
            v-for="(item) in areaList"
            :key="item.areaId"
            :label="item.areaName"
            :value="item.areaId"
          />
          </el-select>
        </el-form-item>
        <el-form-item prop="area" label="镇街名称">
          <!-- {{editParams}} -->
          <el-select  @change="changeEditStreet" v-model="editParams.streetCode" filterable >
              <el-option
            v-for="(item,index) in editStreetList"
            :key="index"
            :label="item.areaName"
            :value="item.areaId"
          />
          </el-select>
        </el-form-item>
        <el-form-item  prop="area" label="负责人">
          <el-select
            v-model="editParams.dingAccountIdList"
            placeholder="请选择责任人"
            filterable
            clearable
            multiple
            @change="(list) => changePerson(list, 1)"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in personList"
              :key="index"
              :value="item.dingAccountId"
              :label="
                item.name +
                ' ' +
                (item.areaName || '') +
                ' ' +
                (item.positionName || '')
              "
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      editStreetList:[],
      streetList:[],
      personList: [],
      areaList: [],
      editParams: {
        districtCode:'',
        districtName:'',
        streetCode:"",
        streetName:'',
        dingAccountIdList:'',

      },
      id:'',
      queryParams: {
        employeeName: "",
        pageSize: 10,
        pageNo: 1,
        districtCode:"",
        streetCode:"",
      },
      total:0,
      tableData: [
   
      ]
    };
  },
  methods: {
    submit () {
      if(!this.editParams.districtCode) {
        this.$message.warning('请选择辖区')
        return
      }
      if(this.editParams.dingAccountIdList.length <= 0) {
        this.$message.warning('请选择负责人')
        return
      }

      if(this.editParams.id) {
        this.$api.editAreaPrincipal(this.editParams).then(res => {
          this.$message.success('编辑成功')
          this.getData()

        })
      } else {
        this.$api.addAreaPrincipal(this.editParams).then(res => {
          this.$message.success('添加成功')
         this.getData()

        })
      }
       
          this.dialogVisible = false
    },
    changeEditArea () {
      this.editParams.streetCode = ''
      this.editParams.streetName = ''
      this.getEditStreetList()
    },
    getEditStreetList () {
  
      if(this.editParams.districtCode) {
         let a = this.areaList.filter(item => item.areaId == this.editParams.districtCode)
         this.editStreetList = a[0].childList
         this.editParams.districtName = a[0].areaName
      } else {
        this.editStreetList = []
        this.editParams.districtName = ''
      }
    },
    changeEditStreet () {
      if(this.editParams.streetCode) {
        let a = this.editStreetList.filter(item => item.areaId == this.editParams.streetCode)
        console.log(a)
       this.editParams.streetName = a[0].areaName
      } else {
         this.editParams.streetName = ''
      }
      console.log( this.editParams.streetName )

    },
    changeArea () {
      this.queryParams.streetCode = ''
      if(this.queryParams.districtCode) {
        this.streetList = this.areaList.filter(item => item.areaId == this.queryParams.districtCode)[0].childList
      } else {
        this.streetList = []
      }
      
    },
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.getData()
    },
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getData()
    },
    getAreaList() {
      const params = {
        _gp: "area",
        _mt: "list"
      };
      this.$api.commonApi(params).then(res => {
        if (res.data.errno === 200) {
          this.areaList = res.data.data.map(item => {
            return {
              label: item.areaName,
              value: item.areaId
            };
          });
        } else {
          this.areaList = [];
        }
      });
    },
    getEmpList() {
      const params = {
        page: 1,
        limit: 9999
      };
      this.$api.roleAllList(params).then(res => {
        if (res.status === 200) {
          this.personList = res.data.data.items;
        }
      });
    },
    addPerson () {
      this.dialogVisible = true
      this.editParams = {
         districtCode:'',
        districtName:'',
        streetCode:"",
        streetName:'',
        dingAccountIdList:'',
      }
    },
    edit(row) {
      console.log(row)
      let a = []
      row.employeeList.forEach(item => {
        a.push(item.dingAccountId)
      })
       this.editParams =  {
        id:row.id,
        districtCode:row.districtCode,
        districtName:row.districtName,
        streetCode:row.streetCode,
        streetName:row.streetName,
        dingAccountIdList:a
      }
      this.getEditStreetList()
      this.dialogVisible = true;
    },
    getData () {
      this.$api.areaPrincipal(this.queryParams).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    handleSizeChange (e) {
      this.queryParams.pageSize = e
      this.getData()
    }, 
    changePerson (e) {
      console.log(this.editParams.dingAccountId)
    },
    currentChange (e) {
      this.queryParams.pageNo = e
      this.getData()
    },
    getPersonList() {
       this.$api
        .getPersonInfo(
           {
            pageNo: 1,
            pageSize: 1000
          })
        .then(res => {
          this.personList = res.data.data.records;
         
        });
    },
    getTreearea () {
      this.$api.getTreearea().then(res => {
        this.areaList = res.data.data[0].childList
        console.log(this.areaList)
      })
    }
  },
  mounted() {
    this.getPersonList()
    // this.getAreaList();
    this.getEmpList();
    this.getData()
    this.getTreearea()
  }
};
</script>

<style>
</style>